<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>lq-ui</title>
    <!-- 这是本页面的布局，和整体的lqui没有关系 -->
    <link rel="stylesheet" href="css/nolq.css">
    <!-- 这是代码高亮工具，和lqui本身也没有关系 -->
    <link rel="stylesheet" href="tools/prism.css">

    <!-- lqui的核心样式文件 -->
    <link rel="stylesheet" href="css/lq.css">
	<!-- lqui的js文件 -->
	<script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
	<script type="text/javascript" src="lq.js"></script>

</head>

<body>
    <div class="main">

        <!-- 此处为本页面的侧边导航 -->
        <div class="aside">
            <a href="#use">使用</a>
            <a href="#color">颜色</a>
            <a href="#layout">布局</a>
            <a href="#button">按钮</a>
            <a href="#form">表单</a>
            <a href="#order">选择按钮</a>
            <a href="#table">表格</a>
            <a href="#panel">面板</a>
			<a href="#Verticalnav">垂直导航栏</a>
			<a href="#Levelnav">水平导航栏</a>
			<a href="#page">分页器</a>
            <a href="#popUp">弹出层</a>
			<a href="#texttype">字体</a>
			<a href="#downmenu">下拉菜单</a>

        </div>

        <!-- 此处为右边的主体页面 -->
        <div class="content">

            <!-- card包裹的为一个组件模块内容，对应侧边导航的一个链接，以id进行链接 -->
            <div class="card" id="use">
                <div class="card-title">
                    快速使用 lqui !
                </div>
                <div class="card-body">
                    <ol>
                        <li>下载&gt; <a href="./lqui-v1.0.zip">lqui</a> &lt;</li>
                        <li>解压到本地,将lqui复制到你的项目目录下</li>
                        <li>在你的html页面引入样式文件和js文件</li>
                        <li>在你需要的组件上添加样式即可</li>
                    </ol>
                    <pre>
                        <code class="language-html">
&lt;!DOCTYPE html>
&lt;html lang="en">

&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>演示使用lqui&lt;/title>
    &lt;!-- 核心样式文件 -->
    &lt;link rel="stylesheet" href="lq-ui/css/lq.css">
&lt;/head>

&lt;body>

    &lt;!-- 使用lqui面版 -->
    &lt;div class="lq-card">
        &lt;div class="lq-card-title">普通卡片&lt;/div>
        &lt;div class="lq-card-body">
            内容区,宽度和高度自适应
        &lt;/div>
    &lt;/div>

    &lt;!-- 使用lqui的按钮 -->
    &lt;button class="lq-btn lq-blue">蓝色按钮 &lt;/button>
    &lt;button class="lq-btn lq-green">绿色按钮 &lt;/button>

    &lt;!-- 核心js文件 -->
    &lt;script src="lq-ui/lq.js">&lt;/script>
&lt;/body>

&lt;/html>
                        </code>
                    </pre>
                </div>
            </div>

            <div class="card" id="color">
                <div class="card-title">
                    基准颜色
                </div>
                <div class="card-body">
                    <span class="lq-blue" style="padding: 5px;border-radius: 5px;">#00a8ff</span>
                    <span class="lq-red" style="padding: 5px;border-radius: 5px;">#e74c3c</span>
                    <span class="lq-gray" style="padding: 5px;border-radius: 5px;">#b2bec3</span>
                    <span class="lq-green" style="padding: 5px;border-radius: 5px;">#1abc9c</span>
                    <span class="lq-black" style="padding: 5px;border-radius: 5px;">#2f3640</span>
                </div>
            </div>

            <div class="card" id="layout">
                <div class="card-title">
                    布局
                </div>
                <div class="card-body">
                    <ol>
                        <li>
                            左右布局
                            <div class="lq-content">
                                <div class="lq-content-item" style="background-color: dimgray; height: 100px;width: 100px;">左边</div>
                                <div class="lq-content-item" style="background-color:lightblue ; height: 100px;width: 100px;">右边</div>
                            </div>
                            <pre>
                                <code class="language-html">
    &lt;div class="lq-content">
        &lt;div>左边&lt;/div>
        &lt;div>右边&lt;/div>
    &lt;/div>
                                </code>
                            </pre>
                        </li>

                        <li>
                            上中下布局
                            <div class="lq-content" style="background-color: dimgray; height: 100px;width: 100px;">
                                上
                            </div>
                            <div class="lq-content" style="background-color: rgb(62, 134, 113); height: 100px;width: 100px;">
                                中
                            </div>
                            <div class="lq-content" style="background-color: rgb(86, 127, 155); height: 100px;width: 100px;">
                                下
                            </div>
                            <pre>
                                <code class="language-html">
    &lt;div class="lq-content" >
        上
    &lt;/div>
    &lt;div class="lq-content" >
        中
    &lt;/div>
    &lt;div class="lq-content" >
        下
    &lt;/div>
                                </code>
                            </pre>
                        </li>

                        <li>
                            侧边导航布局
                            <div class="lq-content" style="background-color: rgb(71, 67, 67); height: 30px;width: 500px;">
                                头部
                            </div>
                            <div class="lq-content" style="height: 200px;width: 500px;">
                                <div style="width: 100px;background-color: lightcoral;">侧边</div>
                                <div style="width: 100%; background-color: chocolate;">内容区</div>
                            </div>

                            <pre>
                                <code class="language-html">
    &lt;div class="lq-content" >
        头部
    &lt;/div>
    &lt;div class="lq-content" >
        &lt;div>侧边&lt;/div>
        &lt;div>内容区&lt;/div>
    &lt;/div>
                                </code>
                            </pre>
                        </li>
                    </ol>
                </div>
            </div>

            <div class="card" id="button">
                <div class="card-title">
                    按钮卡片标题
                </div>
                <div class="card-body">
                    <button class="lq-btn">原始按钮</button>
                    <button class="lq-btn lq-blue">蓝色按钮</button>
                    <button class="lq-btn lq-green">绿色按钮</button>
                    <button class="lq-btn lq-red">警告按钮</button>
                    <button class="lq-btn lq-gray">灰色按钮</button>
					<button class="lq-btn lq-blue lq-fillet">圆角按钮</button>
                    <pre>
                        <code class="language-html">
    &lt;button class="lq-btn">原始按钮 &lt;/button>
    &lt;button class="lq-btn lq-blue">蓝色按钮 &lt;/button>
    &lt;button class="lq-btn lq-green">绿色按钮 &lt;/button>
    &lt;button class="lq-btn lq-red">警告按钮 &lt;/button>
    &lt;button class="lq-btn lq-gray">灰色按钮 &lt;/button>
	&lt;button class="lq-btn lq-blue lq-fillet">圆角按钮 &lt;/button>
                        </code>
                    </pre>
                </div>

            </div>

            <div class="card">
                <div class="card-title" id="form">
                   基本表单
                </div>
                <div class="card-body">
					<form class="form-group">
                        普通输入框
						<input class="lq-inputBox" type="text" placeholder="普通输入框">
                        带图标的输入框
						<input class="lq-inputBox lq-search" type="text" name="search" placeholder="Search..  带图标的输入框">
						伸缩输入框
                        <input class="lq-inputBox lq-extendinput" type="text" placeholder="伸缩输入框">
                        <p></p>
                        带图标的伸缩输入框
						<input class="lq-inputBox lq-search lq-extendinput" type="text" name="search" placeholder="Search..  带图标的伸缩输入框">
					</form>
                    <form class="form-group">
                        <label for="email" class="lq-label">邮箱</label>
                        <input type="email" class="lq-inputBox" id="email" placeholder="邮箱">
                    </form>
                    <form class="form-group">
                        <input type="date" class="lq-date lq-songtext" id="lq-date">
                    </form>
					
					<form>
					  <select class="lq-select">
					  <option value="au">Australia</option>
					  <option value="ca">Canada</option>
					  <option value="usa">USA</option>
					  </select>
					</form>
					
					
					<pre>
					    <code class="language-html">
&lt;form class="form-group">
    &lt;input class="lq-inputBox" type="text" placeholder="普通输入框">
    &lt;input class="lq-inputBox lq-search" type="text" name="search" placeholder="Search..  带图标的输入框">
    &lt;input class="lq-inputBox lq-extendinput" type="text" placeholder="伸缩输入框">
    &lt;input class="lq-inputBox lq-search lq-extendinput" type="text" name="search" placeholder="Search..  带图标的伸缩输入框">
&lt;/form>	
&lt;form class="form-group">
    &lt;label for="email" class=".lq-label">邮箱</label>
    &lt;input type="email" class="lq-inputBox" id="email" placeholder="Email">
&lt;/form>
&lt;form class="form-group">
    &lt;input type="date" class="lq-date lq-songtext" id="lq-date">
&lt;/form>
&lt;form>
    &lt;select class="lq-select">
        &lt;option value="au">Australia&lt;/option>
        &lt;option value="ca">Canada&lt;/option>
        &lt;option value="usa">USA&lt;/option>
    &lt;/select>
&lt;/form>    
                        </code>
					</pre>
                    
                    <div class="card-title" id="form">
                        内联表单
                    </div>
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="email1" class="lq-label">邮箱</label>
                            <input type="email" class="lq-inputBox" id="email1" placeholder="邮箱">
                        </div>
                        <div class="form-group">
                            <label for="username1" class="lq-label">用户名</label>
                            <input type="email" class="lq-inputBox" id="username1" placeholder="用户名">
                        </div>

                    </form>
                    
                    <pre>
					    <code class="language-html">
&lt;form class="form-inline">
    &lt;div class="form-group">
        &lt;label for="email1" class=".lq-label">邮箱</label>
        &lt;input type="email" class="lq-inputBox" id="email1" placeholder="邮箱">
    &lt;/div>	
    &lt;div class="form-group">
        &lt;label for="username1" class="lq-label">用户名</label>
        &lt;input type="email" class="lq-inputBox" id="username1" placeholder="用户名">
    &lt;/div>
&lt;/form>				    
                        </code>
					</pre>

                    <div class="card-title" id="form">
                        水平表单
                    </div>
                    <form class="form-level">
                        <div class="form-group">
                            <label for="email2" class="lq-label">邮箱</label>
                            <input type="email" class="lq-inputBox" id="email2" placeholder="邮箱">
                        </div>
                        <div class="form-group">
                            <label for="username2" class="lq-label">用户名</label>
                            <input type="email" class="lq-inputBox" id="username2" placeholder="用户名">
                        </div>
                    </form>
                    
                    <pre>
					    <code class="language-html">
&lt;form class="form-level">
    &lt;div class="form-group">
        &lt;label for="email2" class=".lq-label">邮箱</label>
        &lt;input type="email" class="lq-inputBox" id="email2" placeholder="邮箱">
    &lt;/div>	
    &lt;div class="form-group">
        &lt;label for="username2" class="lq-label">用户名</label>
        &lt;input type="email" class="lq-inputBox" id="username2" placeholder="用户名">
    &lt;/div>
&lt;/form>				    
                        </code>
					</pre>


                </div>
            </div>


            <div class="card" id="order">
                <div class="card-title">
                    选择按钮测试标题
                </div>
                <div class="card-body">
                    单选按钮
                    <div>
                        <label><input name="OrderOne" type="radio" value="选择1" />选择1</label>
                        <label><input name="OrderOne" type="radio" value="选择2" />选择2</label>
                        <button class="lq-btn lq-blue lq-orderButton"><label class="lq-orderLable"><input name="OrderOne" type="radio" value="选择3" /><span>选择3</span></label></button>
                    </div>
                    复选按钮
                    <div>
                        <button class="lq-btn lq-blue lq-orderButton"><label class="lq-orderLable"><input name="OrderMose" type="checkbox" value="复选1" /><span>复选1</span></label></button>
                        <button class="lq-btn lq-blue lq-orderButton"><label class="lq-orderLable"><input name="OrderMose" type="checkbox" value="复选2" /><span>复选2</span></label></button>
                        <button class="lq-btn lq-blue lq-orderButton"><label class="lq-orderLable"><input name="OrderMose" type="checkbox" value="复选3" /><span>复选3</span></label></button>
                        <button class="lq-btn lq-blue lq-orderButton"><label class="lq-orderLable"><input name="OrderMose" type="checkbox" value="复选4" /><span>复选4</span></label></button>
                    </div>
                    选中变色的单选按钮
                    <div>
                        <button class="lq-btn lq-discolorButton lq-discolorForOne"><label class="lq-orderLable"><input name="OrderOne" type="radio" value="有点" /><span>有点</span></label></button>
                        <button class="lq-btn lq-discolorButton lq-noneOrderButton lq-discolorForOne"><label class="lq-orderLable"><input name="OrderOne" type="radio" value="没有点" /><span>没有点</span></label></button>
                    </div>
                    选中变色的复选按钮
                    <div>
                        <button class="lq-btn lq-discolorButton lq-noneOrderButton" ><label class="lq-orderLable"><input name="OrderMose2" type="checkbox" value="没有勾"/><span>没有勾</span></label></button>
                        <button class="lq-btn lq-discolorButton" ><label class="lq-orderLable"><input name="OrderMose2" type="checkbox" value="有勾"/><span>有勾</span></label></button>
                    </div>
                    <pre>
                        <code class="language-html">
单选按钮
&lt;div>
&lt;label>&lt;input name="OrderOne" type="radio" value="选择1" />选择1&lt;/label>
&lt;label>&lt;input name="OrderOne" type="radio" value="选择2" />选择2&lt;/label>
&lt;button class="lq-btn lq-blue lq-orderButton">&lt;label class="lq-orderLable">
                        &lt;input name="OrderOne" type="radio" value="选择3" />&lt;span>选择3&lt;/span>&lt;/label>&lt;/button>
&lt;/div>
复选按钮
&lt;div>
&lt;button class="lq-btn lq-blue lq-orderButton">&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose" type="checkbox" value="复选1" />&lt;span>复选1&lt;/span>&lt;/label>&lt;/button>
&lt;button class="lq-btn lq-blue lq-orderButton">&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose" type="checkbox" value="复选2" />&lt;span>复选2&lt;/span>&lt;/label>&lt;/button>
&lt;button class="lq-btn lq-blue lq-orderButton">&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose" type="checkbox" value="复选3" />&lt;span>复选3&lt;/span>&lt;/label>&lt;/button>
&lt;button class="lq-btn lq-blue lq-orderButton">&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose" type="checkbox" value="复选4" />&lt;span>复选4&lt;/span>&lt;/label>&lt;/button>
&lt;/div>
选中变色的单选按钮
&lt;div>
    &lt;button class="lq-btn lq-discolorButton lq-discolorForOne">&lt;label class="lq-orderLable">
                        &lt;input name="OrderOne" type="radio" value="有点" />&lt;span>有点&lt;/span>&lt;/label>&lt;/button>
    &lt;button class="lq-btn lq-discolorButton lq-noneOrderButton lq-discolorForOne">&lt;label class="lq-orderLable">
                        &lt;input name="OrderOne" type="radio" value="没有点" />&lt;span>没有点&lt;/span>&lt;/label>&lt;/button>
&lt;/div>
选中变色的复选按钮
&lt;div>
    &lt;button class="lq-btn lq-discolorButton lq-noneOrderButton" >&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose2" type="checkbox" value="没有勾"/>&lt;span>没有勾&lt;/span>&lt;/label>&lt;/button>
    &lt;button class="lq-btn lq-discolorButton" >&lt;label class="lq-orderLable">
                        &lt;input name="OrderMose2" type="checkbox" value="有勾"/>&lt;span>有勾&lt;/span>&lt;/label>&lt;/button>
&lt;/div>
                        </code>
                    </pre>
                </div>
            </div>

            <div class="card" id="table">
                <div class="card-title">
                    表格卡片标题
                </div>
                <div class="card-body">
                    表格卡片内容
					<table class="lq-table">
					  <tr>
					    <th>标题1</th>
					    <th>标题2</th>
					    <th>标题3</th>
					  </tr>
					  <tr>
					    <td>Bill</td>
					    <td>Gates</td>
					    <td>$100</td>
					  </tr>
					  <tr>
					    <td>Steve</td>
					    <td>Jobs</td>
					    <td>$150</td>
					  </tr>
					  <tr>
					    <td>Elon</td>
					    <td>Musk</td>
					    <td>$300</td>
					  </tr>
					  <tr>
					    <td>Mark</td>
					    <td>Zuckerberg</td>
					    <td>$250</td>
					  </tr>
					</table>
                    <pre>
					    <code class="language-html">
                            &lt;table class="lq-table">
                                &lt;tr>
                                &lt;th>标题1&lt;/th>
                                &lt;th>标题2&lt;/th>
                                &lt;th>标题3&lt;/th>
                                &lt;/tr>
                                &lt;tr>
                                &lt;td>Bill&lt;/td>
                                &lt;td>Gates&lt;/td>
                                &lt;td>$100&lt;/td>
                                &lt;/tr>
                            &lt;/table>	    
                        </code>
					</pre>
                </div>
            </div>

            <div class="card" id="panel">
                <div class="card-title">
                    面板
                </div>
                <div class="card-body">
                    <div class="lq-card">
                        <div class="lq-card-title">普通卡片</div>
                        <div class="lq-card-body">
                            内容区,宽度和高度自适应
                        </div>
                    </div>


                    <pre>
                        <code class="language-html">
    &lt;div class="lq-card">
        &lt;div class="lq-card-title">普通卡片&lt;/div>
        &lt;div class="lq-card-body">
            内容区,宽度和高度自适应
        &lt;/div>
    &lt;/div>
                        </code>
                    </pre>
                </div>
            </div>
			
			<div class="card" id="Verticalnav">
                <div class="card-title">
                    导航栏卡片标题
                </div>
                <div class="card-body">
                    <p>普通垂直导航栏</p>
                    <div>
                        <ul class="lq-Verticalnav">
                            <li><a href="javascript:void(0)">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                        </ul>
                    </div>
                    <p>有子菜单的垂直导航</p>
                    <div style="height: 250px;">
                        <ul class="lq-Verticalnav">
                            <li>
                                <a href="javascript:void(0)">1</a>
                                <ul class="lq-Verticalson">
                                <li><a href="javascript:void(0)">11</a></li>
                                <li><a href="javascript:void(0)">12</a></li>
                                </ul>
                            </li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                        </ul>
                    </div>	
                    <pre>
                        <code class="language-html">
                            &lt;div>
                                &lt;ul class="lq-Verticalnav">
                                    &lt;li>&lt;a href="javascript:void(0)">1&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">2&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">3&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">4&lt;/a>&lt;/li>
                                &lt;/ul>
                            &lt;/div>
                            &lt;p>有子菜单的垂直导航&lt;/p>
                            &lt;div style="height: 250px;">
                                &lt;ul class="lq-Verticalnav">
                                    &lt;li>
                                        &lt;a href="javascript:void(0)">1&lt;/a>
                                        &lt;ul class="lq-Verticalson">
                                        &lt;li>&lt;a href="javascript:void(0)">11&lt;/a>&lt;/li>
                                        &lt;li>&lt;a href="javascript:void(0)">12&lt;/a>&lt;/li>
                                        &lt;/ul>
                                    &lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">2&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">3&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="javascript:void(0)">4&lt;/a>&lt;/li>
                                &lt;/ul>
                            &lt;/div>
                        </code>
                    </pre>
                </div>
            </div>
					
                <div class="card" id="Levelnav">
                    <div class="card-title">
                        水平导航栏标题
                    </div>
                    <div class="card-body">
                        <pre>
                            <code class="language-html">
                                &lt;ul class="lq-Levelnav">
                                    &lt;li>&lt;a href="#">首页&lt;/a>&lt;/li>
                                    &lt;li>
                                        &lt;a href="#">学校简介&lt;/a>
                                        &lt;ul class="second">
                                            &lt;li>&lt;a href="#">现任校领导&lt;/a>&lt;/li>
                                            &lt;li>&lt;a href="#">历任书记校长&lt;/a>&lt;/li>
                                            &lt;li>&lt;a href="#">学校概况&lt;/a>&lt;/li>
                                            &lt;li>&lt;a href="#">历史沿革&lt;/a>&lt;/li>
                                            &lt;li>&lt;a href="#">校标、校训&lt;/a>&lt;/li>
                                            &lt;li>&lt;a href="#">校歌&lt;/a>&lt;/li>
                                        &lt;/ul>
                                    &lt;/li>
                                    &lt;li>&lt;a href="#">机构设置&lt;/a>&lt;/li>
                                    &lt;li>&lt;a href="#">师资队伍&lt;/a>&lt;/li>
                                &lt;/ul>
                            </code>
                        </pre>

                        <ul class="lq-Levelnav">
                            <li><a href="#">首页</a></li>
                            <li>
                                <a href="#">学校简介</a>
                                <ul class="second">
                                    <li><a href="#">现任校领导</a></li>
                                    <li><a href="#">历任书记校长</a></li>
                                    <li><a href="#">学校概况</a></li>
                                    <li><a href="#">历史沿革</a></li>
                                    <li><a href="#">校标、校训</a></li>
                                    <li><a href="#">校歌</a></li>
                                </ul>
                            </li>
                            <li><a href="#">机构设置</a></li>
                            <li><a href="#">师资队伍</a></li>
                            <li><a href="#">科学研究</a></li>
                            <li><a href="#">国际交流</a></li>
                            <li><a href="#">招生就业</a></li>
                            <li><a href="#">北海校区</a></li>
                            <li><a href="#">学术会议</a></li>
                            <li><a href="#">诚聘英才</a></li>
                            <li><a href="#">人才培养</a></li>
                            <li><a href="#">党史学习教育</a></li>
                            <li><a href="#">常用链接</a></li>
                        </ul>
                        
                    </div>
                </div>
				
				<div class="card" id="page">
                    <div class="card-title">
                    分页器（需要引入page.js）
                    </div>
                    <div class="card-body">
                        <!-- 分页器 -->
                        <div class="lq-page"></div>

                        <pre>
                            <code class="language-html">
    &lt;div class="lq-page" >&lt;/div >
                            </code>
                        </pre>
                    </div>
                </div>


                <div class="card" id="popUp">
                    <div class="card-title">
                        弹出层标题
                    </div>
                    <div class="card-body">
                        
                        <div class="lq-container">
                            <button onclick="toggle()"  id="lq-button" class="lq-btn lq-blue">弹出</button>
                        </div>
                        <div class="lq-popup-container">
                            <div class="lq-popup">
                                <p>这是测试内容</p>
                                
                                <input type="text" name="inputName" id="inputName" class="lq-inputBox " value="这是测试输入框" />
                                <input type="submit"  onclick="toggle()" value="确认" class="lq-btn lq-blue" id="enter">
                            </div>
                        </div>
                        <pre>
                            <code class="language-html">
                                &lt;div class="lq-container">
                                    &lt;button onclick="toggle()"  id="lq-button" class="lq-btn lq-blue">弹出&lt;/button>
                                &lt;/div>
                                &lt;div class="lq-popup-container">
                                    &lt;div class="lq-popup">
                                        &lt;p>这是测试内容&lt;/p>
                                        &lt;input type="text" name="inputName" id="inputName" class="lq-inputBox " value="这是测试输入框" />
                                        &lt;input type="submit"  onclick="toggle()" value="确认" class="lq-btn lq-blue" id="enter">
                                    &lt;/div>
                                &lt;/div>
                            </code>
                        </pre>
                    </div>
        
                </div>
                
                <div class="card" id="texttype">
                    <div class="card-title">
                        字体测试标题
                    </div>
                    <div class="card-body">
                        <p class="lq-blacktext">这是黑体测试字体</p>
                        <p class="lq-songtext">这是宋体测试字体</p>
                        <p class="lq-kaitext">这是楷体测试字体</p>
                        <p class="lq-newRomantext">This is a paragraph, shown in the Times New Roman font.</p>
                        <p class="lq-arialtext">This is a paragraph, shown in the Arial font.</p>
                        <p class="lq-lucidatext">This is a paragraph, shown in the Lucida Console font.</p>
                        <pre>
                            <code class="language-html">
                &lt;p class="lq-blacktext">这是黑体测试字体&lt;/p>
                &lt;p class="lq-songtext">这是宋体测试字体&lt;/p>
                &lt;p class="lq-kaitext">这是楷体测试字体&lt;/p>
                &lt;p class="lq-newRomantext">This is a paragraph, shown in the Times New Roman font.&lt;/p>
                &lt;p class="lq-arialtext">This is a paragraph, shown in the Arial font.&lt;/p>
                &lt;p class="lq-lucidatext">This is a paragraph, shown in the Lucida Console font.&lt;/p>
                            </code>
                        </pre>
                    </div>
                </div>
                
                <div class="card" id="downmenu">
                    <div class="card-title">
                        下拉菜单标题
                    </div>
                    <div class="card-body">
                        <div class="lq-downmenu">
                          <button class="lq-btn lq-blue">悬停弹出</button>
                          <div class="lq-downmenu-content">
                          <a href="javascript:void(0)">测试1</a>
                          <a href="javascript:void(0)">测试2</a>
                          <a href="javascript:void(0)">测试3</a>
                          </div>
                        </div>
                        
                        <pre>
                            <code class="language-html">
                                &lt;div class="lq-downmenu">
                                    &lt;button class="lq-btn lq-blue">悬停弹出&lt;/button>
                                    &lt;div class="lq-downmenu-content">
                                        &lt;a href="javascript:void(0)">测试1&lt;/a>
                                        &lt;a href="javascript:void(0)">测试2&lt;/a>
                                        &lt;a href="javascript:void(0)">测试3&lt;/a>
                                    &lt;/div>
                                &lt;/div>
                            </code>
                        </pre>
                    </div>
                </div>

        </div> <!-- content结束 -->
    </div><!-- main元素结束 -->

    <!-- 代码高亮工具，和lqui无关 -->
    <script src="tools/prism.js"></script>
	 <script src="js/page.js"></script>

    <!-- lqui的核心js文件 -->
    <script src="lq.js"></script>
</body>
</html